<template>
  <div>
    <div>
      <homePage></homePage>
    </div>
    <div>
      <el-card class="card">
        <div slot="header">
          <span style="font-weight: bold; font-size: 20px; letter-spacing: 2px"
            >认证学者</span
          >
        </div>
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="填写信息"> </el-step>
          <el-step title="验证消息"> </el-step>
          <el-step title="认证完成"> </el-step>
        </el-steps>
        <div class="step1" v-if="active === 0">
          <!--
          <i class="el-icon-edit"></i>
          
          <p class="text1">输入认证邮箱:</p>
          <el-input
            v-model="input1"
            placeholder="请使用您所在机构的邮箱认证"
            class="input1"
          ></el-input> -->
          <div>
            <button class="button" @click="next_step">发送邮件</button>
          </div>
        </div>
        <div class="step2" v-if="active === 1">
          <i class="el-icon-s-promotion"></i>
          <p class="text2">
            我们已经发送了一封邮件到您的邮箱里，请填写邮件里的验证码以完成验证。
          </p>
          <el-input
            v-model="input2"
            placeholder="请填写邮件中的验证码"
            class="input1"
          ></el-input>
          <button class="button" @click="finish">提交认证</button>
        </div>
        <div class="step3" v-if="active === 2">
          <p class="text3">认证成功！将在3秒之后返回首页。</p>
          <img class="person" src="../assets/scholarProfile/人.png" />
        </div>
      </el-card>
    </div>
    <div class="bottom_info">
      <bottom-info></bottom-info>
    </div>
  </div>
</template>

<script>
import bottomInfo from "../components/bottomInfo.vue";
import homePage from "../components/homePage.vue";
export default {
  data() {
    return {
      active: 0,
      input1: "",
      input2: "",

      scholarId: ""
    };
  },
  components: {
    "bottom-info": bottomInfo, //挂载底部组件
    homePage,
  },
  methods: {
    next_step() {
      // /api/scholar/request
      console.log(this.scholarId)
      this.$axios({
        method: "post",
        header: {cookie:`sessionId=${document.cookie}`},
        url: '/api/scholar/request',
        data: this.$qs.stringify({ 
          scholarId: this.scholarId
        })
      })
      .then(res =>{
        console.log(res);
        this.$message.success("邮件已成功发出");
        if (this.active <= 2) this.active += 1;
        /*
        if(res.data.errno==1001)
        {
          
        }
        else if(res.data.errno==3001)
          this.$message.warning("");
        */
      }).catch((err) => {
          console.log(err);
        });

    },
    finish() {
      this.$axios({
        method: "post",
        header: {cookie:`sessionId=${document.cookie}`},
        url: '/api/scholar/validate',
        data: this.$qs.stringify({ 
          scholarId: this.scholarId,
          code: this.input2
        })
      })
      .then(res =>{
        console.log(res);
        this.active += 1;
        setTimeout(() => {
          this.goBack();
        }, 3000);
        /*
        if(res.data.errno==1001)
        {
          
        }
        else if(res.data.errno==3001)
          this.$message.warning("");
          */
      })
    },
    goBack() {
      this.$router.push(`/scholarprofile/${this.scholarId}`);
    }
  },
  created() {
    this.scholarId=this.$route.params.sid;
  }
};
</script>

<style scoped>
.card {
  width: 60%;
  margin: auto;
  margin-top: 30px;
  height: 500px;
}
.bottom_info {
  margin-top: 80px;
  margin-left: 4%;
}
.el-icon-edit {
  font-size: 25px;
  font-weight: bold;
  margin-left: 16%;
  padding-right: 1%;
  display: inline-block;
  color: rgb(62, 62, 179);
}
.el-icon-s-promotion {
  font-size: 30px;
  font-weight: bold;
  margin-left: 16%;
  padding-right: 1%;
  display: inline-block;
  color: rgb(62, 62, 179);
}
.text1 {
  margin-top: 60px;
  font-size: 16px;
  display: inline-block;
}
.text2 {
  margin-top: 60px;
  margin-left: 2px;
  font-size: 16px;
  display: inline-block;
}
.text3 {
  margin-top: 60px;
  margin-left: 5px;
  font-size: 20px;
  font-weight: bold;
  margin-left: 32.5%;
}
.input1 {
  width: 68%;
  margin-left: 16%;
  margin-top: 10px;
}
.button {
  margin-top: 40px;
  margin-left: 44.5%;
  background-color: rgb(73, 73, 184);
  border: 1px solid rgb(62, 62, 179);
  color: white;
  padding: 7px 20px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 3px;
}
.button:hover {
  background-color: rgb(93, 93, 190);
}
.person {
  /* height: 300px;
    width:300px;
    margin-left:33%;
    margin-top:-20px; */
  height: 350px;
  width: 350px;
  margin-left: 29%;
  margin-top: -20px;
}
</style>